<template>
  <div style="border-color: #f2f2f6;">
    <el-button style="margin-left: 16px" @click="drawer = true">新增房型</el-button>
    <el-button @click="handleAllDelete()">批量删除</el-button>
    <el-input v-model="page.roomTypeName" style="max-width: 300px;float: right;" placeholder="房型名称"
      class="input-with-select">
      <template #append>
        <el-button @click="RoomTypegetlist()" :icon="Search" />
      </template>
    </el-input>
  </div>
  <el-table ref="selectedRows" :data="tableData" style="width: 100%; margin-top: 30px;">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="roomTypeName" label="房型名称" />
    <el-table-column prop="roomTypePrice" label="门市价（元）" />
    <el-table-column prop="roomTypeCash" label="押金（元）" />
    <el-table-column prop="roomTypePersonNum" label="可住人数" />
    <el-table-column type="index" label="排序" width="100" />
    <el-table-column label="操作" width="250">
      <template #default="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
        <el-button type="text" @click="">投放</el-button>
        <el-button type="text" @click="HandRoomNumber(row)">设置房号</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination v-model:current-page="page.index" v-model:page-size="page.size" :background="true"
      layout="total, prev, pager, next, jumper" :total="page.totalcount" />
  </div>
  <div>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto;height: 585px;">
      <el-drawer v-model="drawer" title="I am the title" size="70%" :with-header="false">
          <h3>添加房型</h3>
          <div class="dialog-footer" style="background-color:#f2f2f6;">
            <el-form-item label="房型名称" style="width: 350px;">
              <el-input v-model="RoomTypes.roomTypeName" placeholder="房间名称" maxlength="10" />
            </el-form-item>
            <el-form-item label="门市价格" style="width: 350px;">
              <el-input v-model="RoomTypes.roomTypePrice" placeholder="门市价" />
            </el-form-item>
            <el-form-item label="选择押金" style="width: 350px;">
              <el-radio-group v-model="RoomTypes.roomTypeCash">
                <el-radio :value="true">需要</el-radio>
                <el-radio :value="false">不需要</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="房型面积" style="width: 350px;">
              <el-input v-model="RoomTypes.roomTypeArea" placeholder="房型面积" />
            </el-form-item>
            <el-form-item label="可住人数" style="width: 350px;">
              <el-input v-model="RoomTypes.roomTypePersonNum" placeholder="可住人数" />
            </el-form-item>
            <el-form-item label="可否加床" style="width: 550px;">
              <el-radio-group v-model="RoomTypes.isNoCot">
                <el-radio value="1">不可加床</el-radio>
                <el-radio value="2">免费加床</el-radio>
                <el-radio value="3">收费加床</el-radio>
                <el-radio value="4">自定义</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="房型图片">
              <el-upload class="avatar-uploader" action="https://localhost:44388/api/app/pictures/upload-picture"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="RoomTypes.roomTypeImg" :src="RoomTypes.roomTypeImg" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="房型描述" style="width: 350px;">
              <el-input type="textarea" v-model="RoomTypes.roomTypeDesc" placeholder="房型描述" />
            </el-form-item>
            <el-button type="primary" @click="roomtypesadd()">添加</el-button>
          </div>
        <!-- <template #footer>
          
        </template> -->
      </el-drawer>
    </ul>
  </div>

  <el-drawer v-model="UpdateRoomTypeDialog" title="I am the title" size="45%" :with-header="false">
      <h3>编辑房型</h3>
      <div class="dialog-footer" style="background-color:#f2f2f6;">
        <el-form-item label="房型名称" style="width: 350px;">
          <el-input v-model="RoomTypes1.roomTypeName" placeholder="房间名称" maxlength="10" />
        </el-form-item>
        <el-form-item label="门市价格" style="width: 350px;">
          <el-input v-model="RoomTypes1.roomTypePrice" placeholder="门市价" />
        </el-form-item>
        <el-form-item label="选择押金" style="width: 350px;">
          <el-radio-group v-model="RoomTypes1.roomTypeCash">
            <el-radio :value="true">需要</el-radio>
            <el-radio :value="false">不需要</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="房型面积" style="width: 350px;">
          <el-input v-model="RoomTypes1.roomTypeArea" placeholder="房型面积" />
        </el-form-item>
        <el-form-item label="可住人数" style="width: 350px;">
          <el-input v-model="RoomTypes1.roomTypePersonNum" placeholder="可住人数" />
        </el-form-item>
        <el-form-item label="可否加床" style="width: 550px;">
          <el-radio-group v-model="RoomTypes1.isNoCot">
            <el-radio value="1">不可加床</el-radio>
            <el-radio value="2">免费加床</el-radio>
            <el-radio value="3">收费加床</el-radio>
            <el-radio value="4">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="房型图片">
          <el-upload class="avatar-uploader" action="https://localhost:44388/api/app/pictures/upload-picture"
            :show-file-list="false" :on-success="handleAvatarSuccessUPdadte" :before-upload="beforeAvatarUpload">
            <img v-if="RoomTypes1.roomTypeImg" :src="RoomTypes1.roomTypeImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="房型描述" style="width: 350px;">
          <el-input type="textarea" v-model="RoomTypes1.roomTypeDesc" placeholder="房型描述" />
        </el-form-item>
        <el-form-item style="width: 350px;">
          <template v-slot="scope">
          
            <el-button type="primary" @click="roomtypesUpdate()">修改</el-button>
          </template>
        </el-form-item>
      </div>
    <!-- <template #footer> 
      
    </template> -->
  </el-drawer>
  <el-dialog v-model="dialogRoomNumberVisible" title="设置房号" width="800">
    <el-button type="primary" @click="AddroomNumber()">添加房号</el-button>
    <el-table :data="gridData">
      <el-table-column property="roomNum" label="房号" />
      <el-table-column type="index" label="排序" width="100" />
      <el-table-column property="remark" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="">编辑</el-button>
          <el-button size="small" type="danger" @click="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog v-model="dialogroomnumberFormVisible" title="新增房号" width="500">
    <el-form :model="RoomNumber">
      <el-form-item label="房号">
        <el-input v-model="RoomNumber.roomNum" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="RoomNumber.sort" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="RoomNumber.remark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogroomnumberFormVisible = false">取消</el-button>
        <el-button type="primary" @click="InserRoomNum()">确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { addroomType, getroomTypelist, updroomType, delroomType, delroomTypes, getroomNumlist, AddroomNum } from '@/api/index'
import { Search } from '@element-plus/icons-vue'
import type { ElTable, UploadInstance } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
const count = ref(0)
const load = () => {
  count.value += 2
}
const drawer = ref(false)
//钩子函数
onMounted(() => {
  RoomTypegetlist();
})
const page = ref({
  roomTypeName:'',
  index: 1,
  size: 10,
  totalcount: 1,
  totalpage: 1
})
//分页监听
watch(page.value, () => {
  RoomTypegetlist()
})
//显示房型信息
const tableData = ref([])
const RoomTypegetlist = () => {
  getroomTypelist({ roomTypeName: page.value.roomTypeName, index: page.value.index, size: page.value.size }).then(res => {
    tableData.value = res.data.list;
    page.value.totalcount=res.data.totalCount
   console.log(res);
  })
}


//新增房型
const RoomTypes = reactive({
  roomTypeName: '',
  roomTypePrice: null,
  roomTypeCash: null,
  roomTypeArea: null,
  roomTypePersonNum: null,
  isNoCot: null,
  roomTypeImg: '',
  roomTypeDesc: '',
})

const roomtypesadd = () => {
  addroomType(RoomTypes).then(res => {
    if (res.code == 200) {
      ElMessage.success("添加成功");
      RoomTypegetlist();
    }
    else {
      ElMessage.error("添加失败");
    }
  })
}
const value1 = ref(true);
//上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes.roomTypeImg =response.data;
}
///////////////////修改房型////////////////////////
//上传图片
const handleAvatarSuccessUPdadte: UploadProps['onSuccess'] = (
  response
) => {
  RoomTypes1.value.roomTypeImg = response.data;
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像图片大小不能超过 2MB!')
    return false
  }
  return true
}

const RoomTypes1 = ref({
  id: 0,
  roomTypeName: '',
  roomTypePrice: null,
  roomTypeCash: null,
  roomTypeArea: null,
  roomTypePersonNum: null,
  isNoCot: null,
  roomTypeImg: '',
  roomTypeDesc: '',
})
//编辑房型
const UpdateRoomTypeDialog = ref(false);
const handleEdit = (row: any) => {
  UpdateRoomTypeDialog.value = true;
  RoomTypes1.value = row;
}
const roomtypesUpdate = () => {
console.log(RoomTypes1.value)

  updroomType(RoomTypes1.value, RoomTypes1.value.id).then(res => {
    if (res.code == 200) {
      ElMessage.success("修改成功");
      RoomTypegetlist();
    }
    else {
      ElMessage.error("修改失败");
    }
  })
}
//批量删除
const selectedRows = ref<InstanceType<typeof ElTable>>();
const handleAllDelete = () => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const selectedRowsValue = selectedRows.value?.getSelectionRows();
      if (selectedRowsValue) {
        const ids = selectedRowsValue.map((item: any) => item.id);
        delroomTypes(ids).then((res) => {
          if (res.data && res.data.code === 200) {
            ElMessage.success("删除成功");
            RoomTypegetlist(); // 假设RoomTypeGetList是获取房间类型列表的函数
          } else {
            ElMessage.error("删除失败");
          }
        }).catch(() => {
          ElMessage.info("删除操作被取消");
        });
      } else {
        ElMessage.info("请选择要删除的行");
      }
    })
    .catch(() => {
      ElMessage.info("删除操作被取消");
    });
}


//删除房型
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delroomType(row.id).then(res => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          RoomTypegetlist();
        }
        else {
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作！',
      })
    })
}
const dialogRoomNumberVisible = ref(false)
const HandRoomNumber = (row: any) => {
  dialogRoomNumberVisible.value = true
  getroomNum(row.id);
  RoomNumber.roomTypeId = row.id;
}
const gridData = ref([])
const RoomNumber = reactive({
  roomTypeId: '',
  roomTypeName: '',
  roomNum: '',
  sort: '',
  remark: '',
  roomNumberStatues: false,
  isDeleted: false,

})
//获取房间号列表
const getroomNum = (id: any) => {
  getroomNumlist({ id: id }).then(res => {
    gridData.value = res.data;
    console.log(res.data);
  })
};
const dialogroomnumberFormVisible = ref(false)
//新增房间号
const AddroomNumber = () => {
  dialogroomnumberFormVisible.value = true

}
const InserRoomNum = () => {
  AddroomNum(RoomNumber).then(res => {
    if (res.code == 200) {
      ElMessage.success("新增成功");
      dialogroomnumberFormVisible.value = false
      getroomNum(RoomNumber.roomTypeId);
    } else {
      ElMessage.error("新增失败");
    }
  })
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style>
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

.dialog-footer {
  margin-top: 10px;
}
</style>